import { Card, Grid } from 'antd-mobile';
import React, { useEffect, useState } from 'react';
import useRequest, { BASE_AREA, BASE_URL } from '../../../hooks/use-request';

import styles from '../index.module.css';
interface INews {
  id: number;
  title: string;
  imgSrc: string;
  from: string;
  date: string;
}

export const News = () => {
  const [news, setNews] = useState<INews[]>([]);

  const { result, loading } = useRequest('/home/news', BASE_AREA, null);

  useEffect(() => {
    if (!result) return;
    const { body: data } = result;
    setNews(data);
  }, [result, loading]);

  if (loading) return null;
  // 生成最新资讯数据
  const newsItems = news.map((item) => (
    <Grid.Item key={item.id}>
      <img
        src={`${BASE_URL}${item.imgSrc}`}
        alt={item.title}
        className={styles.newsImg}
      />
      <div className={styles.desc}>
        <h2 className={styles.title}>{item.title}</h2>
        <span className={styles.media}>{item.from}</span>
        <span className={styles.date}>{item.date}</span>
      </div>
    </Grid.Item>
  ));
  return (
    <div className={styles.news}>
      <h3 className={styles.newsTitle}>最新资讯</h3>
      <Card>
        <Grid columns={1}>{newsItems}</Grid>
      </Card>
    </div>
  );
};
